<template>
  <div class="shop-container">
    <shop-header></shop-header>
    <div class="shopName" v-if="nowShop !== null">
      <font color="#909399">您的商店：</font>{{ nowShop.name }}
    </div>
    <product-list v-if="nowShop !== null" :products="products"></product-list>
    <div v-if="nowShop === null" class="open-shop-tip">快去您的个人中心开店吧！</div>
  </div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
import ShopHeader from 'components/Header.vue'
import ProductList from 'components/ProductList.vue'
import shopService from 'services/shopService.js'
import productService from 'services/productService.js'
import * as notifyUtil from 'utils/notifyUtil.js'

export default {
  components: {
    'shop-header': ShopHeader,
    'product-list': ProductList
  },
  data() {
    return {
      products: []
    }
  },
  computed: mapGetters({
    nowUser: 'nowUser',
    nowShop: 'nowShop'
  }),
  filters: {},
  methods: {
    ...mapActions({
      setNowShop: 'setNowShop'
    }),
    getShopByUserId() {
      shopService.getShopByUserId(this.nowUser.id).then(response => {
        if (response.data.Shop === null || response.data.Shop === undefined) {
          this.setNowShop(null)
          notifyUtil.showError('查找商店失败', '暂未开店')
        } else {
          let nowShop = response.data.Shop[0]
          this.setNowShop(nowShop)
          this.getProductsByShopId()
        }
      })
    },
    getProductsByShopId() {
      productService.getProductsByShopId(this.nowShop.id).then(response => {
        if (
          response.data.Product === null ||
          response.data.Product === undefined
        ) {
          notifyUtil.showError('查找商品失败', '暂未添加商品')
        } else {
          let products = response.data.Product
          this.$set(this, 'products', products)
        }
      })
    }
  },
  mounted: function() {
    this.getShopByUserId()
    // this.getProductsByShopId()
  }
}
</script>
<style scoped>
.shop-container {
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
  background-color: #f7f7f7;
}
.shopName {
  margin-top: 10px;
  width: 1200px;
  height: 30px;
  line-height: 30px;
  font-size: 12px;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}
.open-shop-tip {
  margin-top: 100px;
  font-size: 30px;
  font-weight: 700;
}
</style>